<template>
  <div class="sidebar-content" :class="{ 'collapsed': collapsed }">
    <!-- 侧边栏头部 -->
    <div class="sidebar-header">
      <div class="logo" v-show="!collapsed">
        <div class="logo-icon">
          <img src="@/assets/logo.webp" alt="logo" class="logo-img"/>
        </div>
        <div class="logo-text" v-show="!collapsed">
          <h1>AI</h1>
          <span class="logo-subtitle">我的AI助手</span>
        </div>
      </div>
      <div class="header-actions">
        <button class="toggle-btn" v-show="!collapsed" @click="$emit('toggle')" title="折叠侧边栏">
          <svg t="1757092494133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="5518" width="200" height="200">
            <path
              d="M206.336 512l264.832 264.832 60.330667-60.330667L326.997333 512l204.501334-204.501333-60.330667-60.330667L206.336 512z m241.066667 0l264.832 264.832 60.330666-60.330667L568.064 512l204.501333-204.501333-60.330666-60.330667L447.402667 512z"
              fill="#000000" p-id="5519"></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- 折叠状态下的展开按钮 -->
    <button class="expand-button" v-show="collapsed" @click="$emit('toggle')" title="展开侧边栏">
      <svg t="1757092494133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="5518" width="200" height="200">
        <path
          d="M206.336 512l264.832 264.832 60.330667-60.330667L326.997333 512l204.501334-204.501333-60.330667-60.330667L206.336 512z m241.066667 0l264.832 264.832 60.330666-60.330667L568.064 512l204.501333-204.501333-60.330666-60.330667L447.402667 512z"
          fill="#000000" p-id="5519"></path>
      </svg>
    </button>

    <!-- 导航菜单插槽 -->
    <nav class="sidebar-nav">
      <slot name="navigation"></slot>
    </nav>

    <!-- 侧边栏底部插槽 -->
    <div class="sidebar-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
// 定义props和emits
const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['toggle'])
</script>


<style scoped>
@import './index.css';
</style>
